<template>
    <div>
        <div class="header">
            <img id="back" src="../image/back.png" alt="back">
            <p class="title">我的订单</p>
            <div class="edit">
                <img id="orderSearch" src="../image/order-search.png" alt="search">
                <img id="orderEdit" src="../image/order-edit.png" alt="search">
            </div>
        </div>
        <div class="content">
            <ul class="order-header">
                <li id="orderAll">全部</li>
                <li id="orderPay">待付款</li>
                <li id="orderSend">待发货</li>
                <li id="orderReceive">待收货</li>
                <li id="orderEvaluate">待评价</li>
            </ul>
            <div class="product">
                <div class="title">
                    <div class="order-logo">
                        <img class="logo-pic1" src="../image/order-logo.png" alt="logo">
                        <span>诺曼姿官方商城</span>
                        <img class="order-go" src="../image/order-go.png" alt="go">
                    </div>
                    <p class="order-info">官方已发货</p>
                </div>
                <div class="details">
                    <div class="order-pic1">
                        <img src="../image/order-pic1.png" alt="">
                    </div>
                    <div class="order-text">
                        <p>Rominz诺曼姿[普罗旺斯之吻系列]</p>
                        <p>薰衣草精油修护肌肤淡化痘印</p>
                        <p>商品规格：5ml</p>
                        <span class="exchange">七天退换</span>
                    </div>
                    <div class="price-count">
                        <p>￥
                            <span id="price">192</span>
                        </p>
                        <p>× 1</p>
                    </div>
                </div>
                <div class="safe">
                    <div class="safe-info">
                        <img src="../image/order-safe.png" alt="safe">
                        <div class="safe-text">
                            <p>运费险</p>
                            <p>确认收货前退货可理赔</p>
                        </div>
                    </div>
                    <div>
                        <p>运费险已出单</p>
                    </div>
                </div>
                <div class="safe-service">
                    <div>保险服务</div>
                    <div>
                        <p>￥ 0.00</p>
                        <p>￥ 0.00</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="count-border">
                    <div class="count">
                        <p>共一件商品</p>
                        <p>合计：￥198(含运费￥0.00)</p>
                    </div>
                </div>
                <div class="logisitics">
                    <div>延长收货</div>
                    <div>查看物流</div>
                    <div>确认收货</div>
                </div>
            </div>
            <div class="product">
                <div class="title">
                    <div class="order-logo">
                        <img class="logo-pic1" src="../image/order-logo.png" alt="logo">
                        <span>诺曼姿官方商城</span>
                        <img class="order-go" src="../image/order-go.png" alt="go">
                    </div>
                    <p class="order-info">官方已发货</p>
                </div>
                <div class="details">
                    <div class="order-pic1">
                        <img src="../image/order-pic2.png" alt="">
                    </div>
                    <div class="order-text">
                        <p>Rominz诺曼姿[精油系列]</p>
                        <p>眼部修护精油原液修护舒缓滋润保湿</p>
                        <p>商品规格：15ml</p>
                        <span class="exchange">七天退换</span>
                    </div>
                    <div class="price-count">
                        <p>￥
                            <span id="price">269</span>
                        </p>
                        <p>× 1</p>
                    </div>
                </div>
                <div class="safe">
                    <div class="safe-info">
                        <img src="../image/order-safe.png" alt="safe">
                        <div class="safe-text">
                            <p>运费险</p>
                            <p>确认收货前退货可理赔</p>
                        </div>
                    </div>
                    <div>
                        <p>运费险已出单</p>
                    </div>
                </div>
                <div class="safe-service">
                    <div>保险服务</div>
                    <div>
                        <p>￥ 0.00</p>
                        <p>￥ 0.00</p>
                        <p>×1</p>
                    </div>
                </div>
                <div class="count-border">
                    <div class="count">
                        <p>共一件商品</p>
                        <p>合计：￥198(含运费￥0.00)</p>
                    </div>
                </div>
                <div class="logisitics-border">
                    <div class="logisitics">
                        <div>延长收货</div>
                        <div>查看物流</div>
                        <div>确认收货</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
@import url("../style/order.less");
</style>